<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="page-header">
      <view class="header-content">
        <view class="header-box">
          <view
            class="item-column"
            @click="$utils.toUrl('/integral/integral/list')"
          >
            <view class="item_label">
              <text>{{ $t('integral.detail') }}</text>
              <image :src="asyncImgs.images.integral_right_icon" />
            </view>
            <view class="item-num">
              <text>{{ integral }}</text>
              <image :src="asyncImgs.images.integral_detail_icon" />
            </view>
          </view>
          <!-- <view class="item-column">
            <view class="item_label">
              <text>{{$t('integral.union')}}</text>
              <image :src="asyncImgs.images.integral_right_icon" />
            </view>
            <view class="item-num">
              <text>0</text>
              <text class="font-unit">{{$t('order.integral3')}}</text>
            </view>
          </view> -->
        </view>
        <view class="more-coupon">
          <view>{{ $t('integral.daily') }}</view>
          <view class="conpon-link" @click="gotoStoreCoupon">
            <text>{{ $t('integral.enter') }}</text>
            <image :src="asyncImgs.images.white_right_icon" />
          </view>
        </view>
        <!-- 优惠券列表 -->
        <view class="coupon-list">
          <scroll-view class="scroll-view_H" scroll-x="true">
            <view
              class="coupon-item"
              v-for="(item, index) in coupon_list"
              :key="index"
            >
              <view class="coupon-content">
                <view class="coupon-content-top">
                  <image src="" />
                  <text>{{ item.name }}</text>
                </view>
                <view class="coupon-price">
                  <view>{{ item.sub_price }}</view>
                  <view>{{ $t('order.integral3') }}</view>
                </view>
                <view class="coupon-msg"
                  >{{ $t('coupon.price1') }}{{ item.min_price
                  }}{{ $t('coupon.price2') }}</view
                >
                <view
                  class="coupon-btn"
                  :class="{ 'haved-coupon': item.is_receive == 1 }"
                  @click="handleCoupon(item)"
                  >{{
                    item.is_receive == 1
                      ? $t('coupon.getted')
                      : $t('coupon.date1')
                  }}</view
                >
              </view>
              <view class="content-bg-middle"></view>
              <view class="content-bg-down"></view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view class="header-bg">
        <image :src="asyncImgs.images.integral_bg_icon" />
      </view>
    </view>
    <view class="page-content">
      <!-- 分类tabs -->
      <view class="content-tabs">
        <u-tabs
          ref="uTabs"
          :list="tabList"
          :current="current"
          active-color="#0EB5F8"
          @change="tabsChange"
        >
        </u-tabs>
      </view>
      <!-- 积分商品列表 -->
      <view class="goods-list">
        <view
          class="goods-item"
          v-for="(good, index) in goods_list"
          :key="index"
          @click="handleGood(good)"
        >
          <image :src="good.goods.cover_pic" />
          <view class="goods-name"> {{ good.name || good.goods.name }} </view>
          <view class="goods-price">
            {{ good.integral }}{{ $t('shop.integral') }}
          </view>
          <view class="goods-changed">
            {{ good.sales }}{{ $t('integral.hasChange') }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      coupon_list: [],
      tabList: [], // 分类列表
      current: 0,
      goods_list: [], // 商品列表
      integral: 0,
      currentPage: 1, // 分页当前页
      totalCount: 0, // 总个数
      pageSize: 10, // 分页条数
    };
  },
  computed: {},
  watch: {},
  onLoad(t) {
    this.$allrequest.integral.integralList().then(res => {
    });
  },
  onShow() {
    this.getIntegralList();
  },
  onReachBottom(e) {
    if (this.pageSize * this.currentPage >= this.totalCount) return;
    this.currentPage++;
    let params = {
      page_count: this.currentPage,
      loadMore: true,
    };
    if (this.current) {
      params['cat_id'] = this.tabList[this.current].id;
    }
    this.getIntegralList(params);
  },
  methods: {
    // 获取积分页商品列表
    getIntegralList(params = {}) {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      this.$allrequest.integral.getIntegralList(params).then(res => {
        uni.hideLoading();
        if (!res.code && res.data) {
          let cat = res.data.cat;
          cat = [
            {
              id: 0,
              name: this.$t('person.cashStatus1'),
            },
            ...cat,
          ];
          this.tabList = cat;
          if (params.loadMore) {
            this.goods_list = [...this.goods_list, ...res.data.list];
          } else {
            this.goods_list = res.data.list;
          }
          this.coupon_list = res.data.coupon;
          this.integral = res.data.integral;
          this.currentPage = res.data.page_count;
          this.totalCount = res.data.row_count;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000,
          });
        }
      });
    },
    // 点击优惠券
    handleCoupon(item) {
      if (item.is_receive == 1) return;
      this.receiveCoupon(
        {
          id: item.id,
          store_id: item.store_id,
        },
        () => {
          let params = this.current
            ? {
                cat_id: this.tabList[this.current].id,
              }
            : {};
          this.getIntegralList(params);
        }
      );
    },
    // 领取优惠券
    receiveCoupon(params, cb) {
      this.$allrequest.facePay.receiveCoupon(params).then(res => {
        if (!res.code && res.data) {
          uni.showToast({
            title: this.$t('coupon.success'),
            icon: 'none',
            duration: 2000,
          });
          cb && cb();
        }
      });
    },
    // tab切换
    tabsChange(e) {
      this.current = e;
      let params = e
        ? {
            cat_id: this.tabList[e].id,
          }
        : {};
      this.getIntegralList(params);
    },
    // 点击单个商品，查看详情
    handleGood(item) {
      this.$utils.toUrl(
        `/integral/integral/integralDetail?id=${item.id}&integral=${this.integral}`
      );
    },
    // 点击跳转领券中心
    gotoStoreCoupon() {
      this.$utils.toUrl('/face-pay/face-pay/storeCoupon');
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: PingFang SC;

  .page-header {
    width: 100%;
    height: 600rpx;
    background: #0eb5f8;
    position: relative;
    z-index: 10;

    .header-content {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 111;
    }

    .header-bg {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;

      image {
        width: 261rpx;
        height: 336rpx;
        position: absolute;
        right: 0;
        top: 20rpx;
      }
    }

    .header-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 17rpx 50rpx;

      .item-column {
        flex: 1;

        .item_label {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          font-weight: 500;
          color: #f5f5f5;

          image {
            width: 10rpx;
            height: 14rpx;
            display: block;
            margin-left: 7rpx;
          }
        }

        .item-num {
          display: flex;
          align-items: baseline;
          font-size: 80rpx;
          font-weight: 500;
          color: #ffffff;
          margin-top: 20rpx;
          line-height: 1;

          image {
            width: 36rpx;
            height: 36rpx;
            display: block;
            margin-left: 13rpx;
          }

          .font-unit {
            font-size: 24rpx;
            font-weight: 400;
            margin-left: 9rpx;
          }
        }
      }
    }

    .more-coupon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 50rpx 25rpx 42rpx 25rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 1;

      .conpon-link {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-weight: 400;

        image {
          width: 10rpx;
          height: 16rpx;
          display: block;
          margin-left: 15rpx;
        }
      }
    }

    .coupon-list {
      width: 100%;
      padding: 0 24rpx;

      .scroll-view_H {
        white-space: nowrap;
      }

      .coupon-item {
        width: 208rpx;
        height: 272rpx;
        border-radius: 16rpx;
        position: relative;
        margin-right: 14rpx;
        display: inline-block;

        .coupon-content {
          width: 100%;
          height: 256rpx;
          background: #ffffff;
          border-radius: 16rpx;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          overflow: hidden;

          .coupon-content-top {
            width: 100%;
            height: 52rpx;
            background: #f6f6f6;
            display: flex;
            align-items: center;
            font-size: 22rpx;
            font-weight: 400;
            color: #999999;
            padding: 0 20rpx;

            image {
              width: 28rpx;
              height: 28rpx;
              background: #0eb5f8;
              display: block;
              margin-right: 12rpx;
            }

            text {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .coupon-price {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: baseline;
            font-size: 58rpx;
            font-weight: 500;
            color: #ff6000;
            margin-top: 23rpx;
            line-height: 1;

            view:last-child {
              font-size: 28rpx;
            }
          }

          .coupon-msg {
            margin-top: 15rpx;
            text-align: center;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
            line-height: 1;
          }

          .coupon-btn {
            width: 120rpx;
            height: 48rpx;
            background: #0eb5f8;
            border-radius: 24rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 48rpx;
            margin: 27rpx auto 0;
          }

          .haved-coupon {
            background: #e8e8e8;
            color: #ffffff;
          }
        }

        .content-bg-middle {
          width: 198rpx;
          height: 256rpx;
          background: #ffffff;
          opacity: 0.5;
          border-radius: 16rpx;
          position: absolute;
          left: 5rpx;
          top: 8rpx;
          z-index: 10;
        }

        .content-bg-down {
          width: 188rpx;
          height: 256rpx;
          background: #ffffff;
          opacity: 0.2;
          border-radius: 16rpx;
          position: absolute;
          left: 10rpx;
          top: 16rpx;
          z-index: 10;
        }
      }

      .coupon-item:last-child {
        margin-right: 0;
      }
    }
  }

  .page-content {
    width: 100%;
    min-height: 300rpx;
    border-radius: 14rpx;
    position: relative;
    z-index: 11;
    top: -14rpx;
    background-color: #f5f5f5;
    overflow: hidden;

    .content-tabs {
      width: 100%;
      height: 78rpx;

      /deep/.u-tabs {
        background-color: #f5f5f5 !important;
      }
    }

    .goods-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 16.5rpx;

      .goods-item {
        width: 342rpx;
        height: 548rpx;
        background: #ffffff;
        border-radius: 14rpx;
        margin: 16rpx 7.5rpx;

        image {
          width: 100%;
          height: 344rpx;
          background: #efefef;
          border-radius: 14rpx 14rpx 0 0;
        }

        .goods-name {
          width: 295rpx;
          //   height: 61px;
          font-size: 28rpx;
          font-weight: 400;
          color: #191919;
          line-height: 30rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          /* 这里是超出几行省略 */
          overflow: hidden;
          margin: 28rpx auto 0;
        }

        .goods-price {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ff5128;
          line-height: 1;
          margin: 12rpx 0;
          padding-left: 22rpx;
        }

        .goods-changed {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          line-height: 1;
          padding-left: 22rpx;
        }
      }
    }
  }
}
</style>
